<template>
	<view class="wrap">
		<view class="header-wrap">
			<view class="header-nav">
				<view class="nav-logo">
					<u--image src="../../static/images/logo.svg" width="63px" height="30px"></u--image>
				</view>
				<view class="nav-li">
					<u--input
					    placeholder="搜索"
						placeholderStyle="font-size: '14px';color: '#2e303399'"
						style="width: 89%;height: 22px;border-radius: 20px; border: none;background-color: #F7F8FA;"
					    v-model="searchValue"
					    @change="searchChange"
						@focus="searchFocus"
					  >
					  <template slot="prefix">
					  	<u--image src="../../static/images/search.svg" width="17px" height="18px" mode=""></u--image>
					  </template>
					 
					</u--input>
				</view>
				<view class="nav-menus" @click="bindMore">
					<u--image src="../../static/images/menu.svg" width="16px" height="16px"></u--image>
				</view>
			</view>
			<view class="nav-menu-down">
				<view style="flex: 1;text-align: center;color: #2E3033;font-size: 14px">
					热门
				</view>
				<view style="flex: 1;text-align: center;color: #2E3033;font-size: 14px">
					新品
				</view>
				<view style="flex: 1;text-align: center;color: #2E3033;font-size: 14px">
					销量
				</view>
				<view style="flex: 1;text-align: center;color: #2E3033;font-size: 14px">
					<u--image src="../../static/images/apps2.svg" width="28" height="28" style="display: inline-block;margin-right: 5px;margin-top: 12px;"></u--image>
					<text style="display: inline-block;vertical-align: middle;margin-bottom: 4px;">筛选</text>
				</view>
			</view>
			<view style="display: block;width: 100%;margin: 0 auto">
				<u-scroll-list :indicator="false" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c" style="width: 100%;">
					<view 
						v-for="(item, index) in listScroll"
						:key="index" 
						class="scroll-a"
						@click="bindApplictionScene(item)"
						style="min-width: 73px;padding: 0 10px;;text-align: center;border-radius: 16px;background: #2e30330f;height: 32px;line-height: 32px;margin-right: 15px;" >
						
						<text style="color: #2E3033;font-size: 14px;display: inline-block;text-align: center;margin-right: 5px;">{{item.name}}</text>
						<u--image src="../../static/images/icon-down-fill.svg" width="20" height="20" style="display: inline-block;margin-right: 5px;margin-top: 12px;"></u--image>
						
					</view>
				</u-scroll-list>
			</view>
			<view>
				
				<view class="new-list" v-for="(item, index) in contentList" :key="index">
					<!-- <view class="new-list-tit-line"></view> -->
					<view class="content-list">
						<view class="demo-layout bg-purple-light" @click="storeDetail(item)">
							<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" width="200" height="200"></u--image>
							<view style="margin-left: 10px;position: relative;width: 100%;">
								<view style="font-size: 14px;color: #2E3033;margin-top: 3px;">消防部队、消防车用水带</view>
								<view style="color: #EF312A;font-size: 16px;display: block;margin-top: 15px;margin-bottom: 10px;">￥6999</view>
								<view style="font-size: 12px;color: rgba(46, 48, 51, 0.6);">
									<text>5242人讨论 </text>
									<text style="margin-left: 10px;margin-right: 10px;">9.5分评论 </text>
									<text>6524条评价</text>
								</view>
								<view 
									:class="[item.status ? 'actived-store' : '']"
									@click.stop.prevent="joinCompare(item)"
									style="color: #FFF;text-align: center;;position: absolute;top: 0;bottom: 5px; right: 15px;margin: auto;width: 61px;height: 23px;line-height: 23px;font-size: 12px;background: #EF312A;border-radius: 16px 16px 16px 16px;">
									<u--image v-if="!item.status" src="../../static/images/duibi.svg" width="24" height="24" style="display: inline-block;margin-right: 5px;vertical-align: middle;margin-bottom: 3px;"></u--image>
									<text>{{item.status ? '已添加' : '对比'}}</text>
								</view>
								
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="tabIndex == 1">
				<indexList></indexList>
			</view>
			
			<u-popup :show="applicationShow" mode="top" @close="applicationClose" @open="applicationOpen" style="position: relative;">
				<view style="height: 81vh;overflow-y: scroll;position: relative;" v-if="popupType == 'search'">
					<view style="width: 100%; position: fixed;left: 0;right: 0;height: 36px;background-color: #fff;z-index: 600">
						<u-search placeholder="搜索"
						style="width: 90%;margin:0 auto;border-radius: 20px;height: 36px;background-color: rgba(247, 248, 250, 1);"
						:clearabled="true"
						searchIconSize="36"
						:inputStyle="{fontSize: '14px'}"
						:showAction="false" 
						v-model="applicationSearch">
						</u-search>
					</view>
					<view style="width: 93%;margin: 15px auto 0 auto;color: rgba(46, 48, 51, 1);font-size: 16px;padding-top: 36px;">按字母筛选</view>
					<view style="display: flex;width: 87%;height: 100%;margin: 0 auto;position: relative;margin-left: 15px;">
						<view style="flex: 1;">
							<view v-for="item in appsFilter" style="font-weight: normal;font-size: 14px;color: #2E3033;margin-top: 15px;">{{item.name}}</view>
						</view>
						<view style="flex: 0 0 20px;text-align: center;position: fixed;right: 15px;z-index: 650">
							<view style="font-size: 14px;color: #2878ff;font-weight: 400;" v-for="(item,index) in serialNumber">{{item}}</view>
							<view style="font-size: 14px;color: #2878ff;font-weight: 400;">#</view>
						</view>
					</view>
				</view>
				<view :style="{height: isBindAdvFilter ? '100vh' : '80vh'}" style="height: 80vh;overflow-y: scroll;position: relative;" v-if="popupType == 'supplier'">
					<view style="width: 100%; position: fixed;left: 0;right: 0;height: 36px;background-color: #fff;z-index: 600">
						<u-search placeholder="搜索"
						style="width: 90%;margin:0 auto;border-radius: 20px;height: 36px;background-color: rgba(247, 248, 250, 1);"
						:clearabled="true"
						searchIconSize="36"
						:inputStyle="{fontSize: '14px'}"
						:showAction="false" 
						v-model="applicationSearch">
						</u-search>
					</view>
					<view style="width: 93%;margin: 15px auto 10px auto;color: rgba(46, 48, 51, 1);font-size: 16px;padding-top: 36px;">供应商</view>
					<view style="width: 93%;margin-bottom: 30px;margin-left: auto;margin-right: auto;">
						<text 
						class="appType-tags" :class="[supplierIndex === item.index ? 'appType-tags-actived' : '']"
						@click="bindAppTypeTag(item, index, 'supplier')"
						 v-for="(item, index) in appSupplierTags">{{item.name}}</text>
					</view>
					
					<view style="width: 93%;margin: 15px auto 10px auto;color: rgba(46, 48, 51, 1);font-size: 16px;">价格</view>
					<view style="width: 93%;margin-bottom: 30px;margin-left: auto;margin-right: auto;">
						<text 
						class="appType-tags" :class="[priceIndex === item.index ? 'appType-tags-actived' : '']"
						@click="bindAppTypeTag(item, index, 'price')"
						 v-for="(item, index) in appPriceTags">{{item.name}}</text>
						 <view class="filterInput" style="display: flex;">
							 <u--input
							     placeholder="最低价"
							     border="none"
							     v-model="lowPrice"
								 :placeholderStyle="{textAlign: 'center'}"
								 style="height: 32px;background-color: #F7F8FA;color: rgba(46, 48, 51, 1);width: 154px;height: 32px;border-radius: 16px;text-align: center;"
							   ></u--input>
							   <text style="display: inline-block;margin: 0 16px">-</text>
							   <u--input
							       placeholder="最高价"
							       border="none"
							       v-model="heightPrice"
								   :placeholderStyle="{textAlign: 'center'}"
								   style="height: 32px;background-color: #F7F8FA;color: rgba(46, 48, 51, 1);width: 154px;height: 32px;border-radius: 16px;text-align: center;"
								   
							     ></u--input>
						 </view>
					</view>
					
					<view style="width: 93%;margin: 15px auto 10px auto;color: rgba(46, 48, 51, 1);font-size: 16px;">上架日期</view>
					<view style="width: 93%;margin-bottom: 30px;margin-left: auto;margin-right: auto;">
						<text 
						class="appType-tags" :class="[dateIndex === item.index ? 'appType-tags-actived' : '']"
						@click="bindAppTypeTag(item, index, 'date')"
						 v-for="(item, index) in appDateTags">{{item.name}}</text>
						 <view class="filterInput" style="display: flex;">
							 <u--input
							     placeholder="起始日期"
							     border="none"
							     v-model="lowPrice"
								 readonly
								 inputAlign='center'
								 :placeholderStyle="{textAlign: 'center'}"
								 style="height: 32px;background-color: #F7F8FA;color: rgba(46, 48, 51, 1);width: 154px;height: 32px;border-radius: 16px;text-align: center;"
							   ></u--input>
							   <text style="display: inline-block;margin: 0 16px;color: rgba(46, 48, 51, 1);">-</text>
							   <u--input
							       placeholder="结束日期"
							       border="none"
							       v-model="heightPrice"
								   :placeholderStyle="{textAlign: 'center'}"
								   readonly
								   style="height: 32px;background-color: #F7F8FA;color: rgba(46, 48, 51, 1);width: 154px;height: 32px;border-radius: 16px;text-align: center;"
								   
							     ></u--input>
						 </view>
					</view>
					
					<view style="width: 93%;margin: 15px auto 10px auto;color: rgba(46, 48, 51, 1);font-size: 16px;">使用场景</view>
					<view style="width: 93%;margin-bottom: 30px;margin-left: auto;margin-right: auto;">
						<text 
						class="appType-tags" :class="[sceneIndex === item.index ? 'appType-tags-actived' : '']"
						@click="bindAppTypeTag(item, index, 'scene')"
						 v-for="(item, index) in sceneTags">{{item.name}}</text>
					</view>
					
					<view v-if="!isBindAdvFilter" @click="bindAdvFilter" style="text-align: center;width: 110px;margin: 0 auto;position: fixed;left: 0;right: 0;z-index: 670">
						<u--image src="../../static/images/icon-app2.svg" width="28" height="28" style="margin-right: 10px;display: inline-block;vertical-align: middle;"></u--image>
						<text style="display: inline-block;font-size: 14px;color: #EF312A;vertical-align: middle;">高级筛选</text>
					</view>
					
					<!-- 查看商品 -->
					<view class="footerPop" v-if="isBindAdvFilter">
						<view class="footerPop-text">共有13款商品符合条件</view>
						<view class="footerPop-btn">查看商品</view>
					</view>
				</view>
			</u-popup>
		</view>
		
		<!-- 对比 -->
		<view class="storeCompare" v-if="compareList.length > 0">
			<view class="com-a">已选</view>
			<view class="com-b">
				<u--image src="" width="60px" height="30px" mode=""></u--image>
				<text class="bragd">{{compareList.length}}</text>
			</view>
			<view class="com-c">最多五款</view>
			<view class="com-d" @click="comparison">开始对比</view>
		</view>
		
		<!-- 更多弹框 -->
		<u-popup 
			mode="center" 
			:show="moreShow" 
			:round="10" 
			:safeAreaInsetBottom="false"
			@close="bindClose"
			@open="bindOpen">
			<view style="width: 315px;padding: 15px;border-radius: 10px;">
				<view class="more-tit">更多</view>
				<view class="more-btn" @click="bindToDo('report')">
					<u--image
						src="../../static/images/jubao.svg" 
						width="16px" 
						height="16px"
						style="vertical-align: middle;display: inline-block;margin-right: 10px;">
						</u--image>
					一键举报
				</view>
				<view class="more-btn" @click="bindToDo('feedback')">
					<u--image
						src="../../static/images/yijian.svg" 
						width="16px" 
						height="16px"
						mode=""
						style="vertical-align: middle;display: inline-block;margin-right: 10px;"></u--image>
					意见反馈
				</view>
			</view>
		</u-popup>
				
	</view>
</template>

<script>
	import indexList from '../components/indexList/indexList.vue'
	export default {
		data() {
			return {
				isBindAdvFilter: false,
				tabIndex: 0,
				supplierIndex: 0,
				priceIndex: 0,
				dateIndex: 0,
				sceneIndex: 0,
				searchValue: '',
				moreShow: false,
				applicationShow: false,
				applicationSearch: '',
				popupType: null,
				swiperList: [
					{
						image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
						title: '关于开展社会应急无人机资源调研的函',
					}
				],
				listScroll: [{name: '供应商', value: 'supplier'}, {name: '价格', value: 'price'}, {name: '上架时间', value: 'time'}, {name: '使用场景', value: 'scene'}],
				tabList: [
					{name: '分类1'},
					{name: '分类2'},
				],
				contentList: [
					{status: false},
					{status: false},
					{status: false},
					{status: false},
					{status: false},
				],
				appsFilter: [
					{name: '水罐消防车（SG）', status: false},
					{name: '干粉水联用消防车（GL）',status: false},
					{name: '二氧化碳消防车（EY）',status: false},
					{name: '泵浦消防车（BP）',status: false},
				],
				appSupplierTags: [
					{name: '全部', index: 0},
					{name: '供应商1', index: 1},
					{name: '供应商2', index: 2},
					{name: '供应商3', index: 3},
				],
				appPriceTags: [
					{name: '全部', index: 0},
					{name: '1999以下', index: 1},
					{name: '2000-5999元', index: 2},
					{name: '6000-10000元', index: 3},
				],
				appDateTags: [
					{name: '全部', index: 0},
					{name: '2024年', index: 1},
					{name: '2023年', index: 2},
					{name: '2022年', index: 3},
				],
				sceneTags: [
					{name: '全部', index: 0},
					{name: '救援', index: 1},
				],
				// 加入对比列表
				compareList: []
				
			}
		},
		components: {
			indexList
		},
		computed: {
			serialNumber() {
				let serialArr = [];
				for (let i = 97; i <= 122; i++) {
				  serialArr.push(String.fromCharCode(i).toLocaleUpperCase())
				}
				return serialArr;
			}
		},
		methods: {
			bindTabChange(item) {
				// TODO 优化：切换时，页面有加载时长
				console.log(item);
				let {index} = item;
				this.tabIndex = index;
			},
			searchChange() {},
			searchFocus() {
				this.applicationShow = true;
				this.popupType = 'search';
				// uni.navigateTo({
				// 	url: '/pages/components/searchClassification/index'
				// })
			},
			bindMore() {
				this.moreShow = true
			},
			bindClose() {
				this.moreShow = false;
				this.popupType = null;
			},
			bindOpen() {},
			bindToDo(type) {
				if(type === 'report') {
					uni.navigateTo({
						url: '/pages/components/report/index'
					})
				}
				if (type === 'feedback') {
					uni.navigateTo({
						url: '/pages/components/feedback/index'
					})
				}
			},
			bindTabclick() {},
			joinCompare(item) {
				console.log(item);
				if(this.compareList.length >= 5) return;
				item.status = !item.status;
				this.compareList.push(item);
				// this.compareList.find(pareItem => item.id == pareItem.id)
			},
			storeDetail(item) {
				uni.navigateTo({
					url: '/pages/components/storeDetail/index'
				})
			},
			applicationOpen() {},
			applicationClose() {
				this.applicationShow = false
			},
			bindApplictionScene(item) {
				const {value} = item;
				this.applicationShow = true;
				this.popupType = value;
			},
			bindAppTypeTag(item, index, type) {
				if(type === 'supplier') {
					this.supplierIndex = index
				}
				if (type === 'price') {
					this.priceIndex = index
				}
				if(type === 'date') {
					this.dateIndex = index
				}
				if(type === 'scene') {
					this.sceneIndex = index
				}
				
			},
			// 高级筛选
			bindAdvFilter() {
				this.isBindAdvFilter = !this.isBindAdvFilter
			},
			comparison() {
				uni.navigateTo({
					url: '/pages/components/comparisonParams/index'
				})
			}
		}
	}
</script>

<style>
	/* page {
		background-color: rgb(240, 242, 244);
	} */
</style>

<style lang="scss" scoped>
	// ::v-deep .u-tabs__wrapper__nav__line {
	// 	transform: translate(25px) !important;
	// }
	
</style>
<style lang="scss" scoped>
$txtcolor: #2E3033;
$w100: 100%;
$h100: 100%;

.wrap {
	width: $w100;
	box-sizing: border-box;
	
	.header-wrap {
		
		width: 95%;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 0px 0px 0px 0px;
		
		.header-nav {
			height: 44px;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.nav-logo {
				width: 63px;
			}
			.nav-li {
				flex: 1;
			}
			.nav-menus {
				width: 20px;
			}
		}
		.nav-menu-down 	{
				display: flex;
				width: 100%;
				margin: 20px auto 15px auto;
				height: 40px;
				line-height: 40px;
		}
		.hot-wrap {
			width: 100%;
			height: 154px;
			
			background: #FFFFFF;
			box-shadow: 0px 3px 6px 1px #EEF1F3;
			border-radius: 10px 10px 10px 10px;
			box-sizing: border-box;
			padding: 14px 15px;

			box-sizing: border-box;
			
			.hot-tit {
				display: flex;
				align-items: center;
				
				.tit-l {
					flex: 1;
					text-align: left;
					
					.pointImage {
						display: inline-block;vertical-align: middle;margin-right: 10px;
						width: 5px;height: 5px;
						background-color: #2E3033;
						border-radius: 50%;
						vertical-align: middle;
					
					}
				}
				.tit-r {
					flex: 1;
					font-size: 12px;
					color: #1d1f2099;
					text-align: right;
					margin-left: 5px;
				}
			}
			.hot-list {
				margin-top: 15px;
				
				.tit-l {
					flex: 1;
					text-align: left;
					
					.pointImage {
						display: inline-block;vertical-align: middle;margin-right: 10px;
						width: 5px;height: 5px;
						background-color: #2E3033;
						border-radius: 50%;
						vertical-align: middle;
					
					}
				}
				.tit-r {
					flex: 1;
					font-size: 12px;
					color: #1d1f2099;
					text-align: right;
					margin-left: 5px;
				}
			}
		}
		.new-list {
			width: 100%;
			display: block;
			margin-top: 15px;
			
			.new-list-tit {
				font-weight: normal;
				font-size: 16px;
				color: #EF312A;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-bottom: 15px;
			}
			.new-list-tit-line {
				width: 100%;
				height: 2px;
				background: #EF312A;
				border-radius: 0px 0px 0px 0px;
			}
			.content-list {
				margin-top: 15px;;
			}
		}
	}
	
	.demo-layout {
		display: flex;
		background: #FFFFFF;
	}
}

.more-tit {
	font-weight: normal;
	font-size: 16px;
	color: #2E3033;
	line-height: 0px;
	text-align: center;
	font-style: normal;
	text-transform: none;
	margin-top: 15px;
	margin-bottom: 30px;
}
.more-btn {
	width: 100%;
	height: 50px;
	
	background: #F7F8FA;
	border-radius: 10px 10px 10px 10px;
	text-align: center;
	line-height: 50px;
	margin-bottom: 10px;
	
	font-weight: normal;
	font-size: 14px;
	color: #2E3033;
	font-style: normal;
	text-transform: none;

}

.actived-store {
	background: rgba(223,41,34,0.1) !important;
	border-radius: 16px !important;
	border: 1px solid #EF312A !important;
	color: rgba(239, 49, 42, 1) !important;
}

.appType-tags {
	background: rgba(46, 48, 51, 0.05);
	border-radius: 16px;
	padding: 6px 15px;
	
	font-weight: normal;
	font-size: 14px;
	color: rgba(46, 48, 51, 1);
	margin-right: 10px;
	margin-bottom: 10px;
	display: inline-block;
	text-align: center;
}
.appType-tags-actived {
	background: rgba(223,41,34,0.05) !important;
	border-radius: 16px !important;
	border: 1px solid #EF312A !important;
	font-weight: normal;
	font-size: 14px !important;
	color: #EF312A !important;
}

.footerPop {
	position: fixed;
	width: 100%;
	height: 49px;
	background: #FFFFFF;
	box-shadow: 0px -3px 6px 1px rgba(0,0,0,0.16);
	border-radius: 0px 0px 0px 0px;
	bottom: 0;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 5px 15px;
	
	.footerPop-text {
		font-weight: normal;
		font-size: 14px;
		color: #2E3033;
		flex: 1;
	}
	.footerPop-btn {
		width: 115px;
		height: 40px;
		
		background: #EF312A;
		border-radius: 20px 20px 20px 20px;
		color: #fff;
		text-align: center;
		line-height: 40px;
		font-size: 14px;

	}
}

.storeCompare {
	position: fixed;
	bottom: 83px;
	width: 100%;
	height: 40px;
	background: #FFFFFF;
	box-shadow: 0px -3px 3px 1px #D4D4D4;
	z-index: 700;
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #2E3033;
	box-sizing: border-box;
	padding: 7px 15px;
	
	.com-a {
		margin-right: 10px;
	}
	.com-b {
		margin-right: 15px;
		position: relative;
		
		.bragd {
			position: absolute;
			width: 30px;
			height: 30px;
			background: #F9D4D2;
			border-radius: 15px;
			font-size: 14px;
			color: #EF312A;
			top: 0;
			right: 0;
			line-height: 30px;
			text-align: center;
		}
	}
	.com-c {
		margin-right: 100px;
	}
	.com-d {
		width: 68px;
		height: 27px;
		background: #EF312A;
		border-radius: 16px;
		text-align: center;
		line-height: 27px;
		text-align: center;
		font-size: 12px;
		color: #fff;
	}

}
</style>

<style scoped lang="scss">
::v-deep .u-line-1 {
	text-align: center !important;
}

::v-deep .u-col-6:nth-child(n) {
	padding-right: 5px !important;
}
::v-deep .u-col-6:nth-child(2n) {
	padding-left: 5px !important;
}
::v-deep .u-search__content {
	height: 36px !important;
}
</style>
